<template>
	<view class="edit-user-info-page">
		<view class="top-info-box">
			<view class="field-box">
				<view class="field-content-box">
					<view class="input-box" style="height: 120rpx;">
						<text class="icon">*</text>
						<text class="text">头像</text>
						<view class="input">
							<image style="width: 120rpx; height: 120rpx; background-color: #eeeeee; border-radius: 50%;"
								:src="userInfo.headSrc">
							</image>
							<button class="upload-avatar" open-type="chooseAvatar"
								@chooseavatar="onChooseavatar"></button>
						</view>
					</view>
				</view>
			</view>

			<view class="field-box">
				<view class="field-content-box">
					<view class="input-box">
						<text class="icon">*</text>
						<text class="text">昵称</text>
						<input class="input" :value="userInfo.userName" placeholder="请输入昵称"
							placeholder-class="custom-placeholder-color" @change="handleUserName" type="nickname" />
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn-box">
			<up-button type="primary" text="确定" @click="submitInfo"></up-button>
		</view>

		<!-- 消息通知 -->
		<up-notify ref="uNotifyRef" :style="{ height: '20px' }" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { config } from '@/utils/config';
	import { updateByIdApi } from '@/api/my.js';
	import { jumpToParent } from '@/utils/jump.js'

	const userInfo = ref({
		headSrc: '',
		userName: '',
		id: ''
	})

	// 消息通知状态
	const uNotifyRef = ref(null);
	
	onMounted(() => {
		// 获取缓存的登录信息
		userInfo.value = uni.getStorageSync('userInfo') == '' ? null : uni.getStorageSync('userInfo')
	})

	// 头像
	const onChooseavatar = (e) => {
		uni.uploadFile({
			url: config.URL_UPLOAD, // 仅为示例，非真实的接口地址
			filePath: e.detail.avatarUrl,
			name: 'file',
			formData: {},
			success: (res : any) => {
				let { results } = JSON.parse(res.data)
				userInfo.value.headSrc = results
			},
		});
	}

	// 昵称
	const handleUserName = (e) => {
		userInfo.value.userName = e.detail.value
	}

	// 提交
	const submitInfo = async () => {
		if (!userInfo.value.userName.length) return uNotifyRef.value.show({
			top: -1,
			message: '请输入昵称',
			type: 'error',
		});
		let { code, errorMsg, results } = await updateByIdApi({
			currentUserId: userInfo.value.id,
			headSrc: userInfo.value.headSrc,
			userName: userInfo.value.userName
		})
		if(code == 200) {
			uni.setStorageSync('userInfo', results)
			uNotifyRef.value.show({
				top: -1,
				message: '修改成功',
				type: 'success',
			});
			setTimeout(() => {
				jumpToParent()
			}, 2000)
		} else {
			uNotifyRef.value.show({
				top: -1,
				message: errorMsg || '接口异常',
				type: 'error',
			});
		}
	}
</script>

<style lang="scss" scoped>
	.edit-user-info-page {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top-info-box {
			margin-top: 20rpx;

			.field-box:last-child {
				padding: 24rpx 32rpx 0 32rpx !important;
			}

			.field-box {
				width: 100%;
				background-color: #fff;
				padding: 24rpx 32rpx;
				box-sizing: border-box;

				.field-content-box {
					width: 100%;
					height: 100%;
					border-bottom: 2rpx solid #e7e7e7;

					.input-box {
						display: flex;
						align-items: center;
						height: 120rpx;
						position: relative;

						.icon {
							color: red;
							height: 48rpx;
							line-height: 48rpx;
							display: flex;
							align-items: center;
						}

						.text {
							width: 20%;
							font-size: 32rpx;
							line-height: 48rpx;
						}

						.input {
							margin-left: 32rpx;
							width: calc(100% - 20% - 32rpx);
							text-align: end;
						}

						.custom-placeholder-color {
							color: rgba(0, 0, 0, 0.26);
							/* 设置你想要的占位符颜色，这里是红色 */
						}

						.upload-avatar {
							position: absolute;
							bottom: 0;
							right: 0;
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
							opacity: 0;
						}
					}
				}
			}
		}

		.bottom-btn-box {
			padding: 10rpx 16rpx;
			box-sizing: border-box;
			background-color: #fff;
		}
	}
</style>